<!--异步-->
<template>
    <div class="chartInfo-container">
        <div class="card-header">
            <p>图表生成总数：{{allChartDataLength}} 当前图表生成中数量：{{isRunningChartLength}} </p>
        </div>
        <el-divider>
            <el-icon>
                <star-filled/>
            </el-icon>
        </el-divider>
        <div class="step-container">
            <el-card shadow="never" body-style="padding:0">
                <el-table :data="chartListData" :stripe="true" :border="true">
                    <el-table-column label="图表信息" width="300px" align="left">
                        <template #default="{ row }">
                            <el-text class="mx-1"><span style="font-weight: bold">图表名称：</span>{{row.name}}</el-text><br/>
                            <el-text class="mx-1"><span style="font-weight: bold">分析目标：</span>{{row.goal}}</el-text>
                        </template>
                    </el-table-column>
                    <el-table-column label="图表异步生成进度" align="center">
                        <template #default="{ row }">
                            <el-steps align-center :space="200" :active="stepsActiveFunc(row.status)" finish-status="success"
                                      process-status="finish">
                                <el-step title="submit" description="提交图表信息"/>
                                <el-step title="wait" description="等待处理"/>
                                <el-step title="running" description="正在异步生成图表"/>
                                <el-step :title="stepsActiveFunc(row.status) === 4 ? 'failed' : 'succeed'" :status="stepsActiveFunc(row.status) === 4 ? 'error' : ''"
                                         description="图表生成失败"/>
                                <el-step title="succeed" :status="setSucceedStep(row.status)" description="图表生成成功"/>
                            </el-steps>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"  width="320px" align="center">
                        <template #default="{ row }">
                          <el-button type="success" size="default" v-if="row.status === 'succeed'" plain @click="dialogTableVisibleFunc(row)">
                            查看
                          </el-button>
                            <el-button type="primary" plain size="default" v-if="row.status === 'failed'">重试</el-button>
                            <el-button type="danger" plain v-if="row.status === 'succeed' || row.status === 'failed'" @click="deleteChart(row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
    </div><!--图表弹出框-->
  <el-dialog v-model="dialogTableVisible" title="图表详情">
    <div class="dialog_container" >
      <div class="dialog_container-chartHead">
        <el-text class="mx-1" type="warning">图表名称：{{row.name}}</el-text><br/>
        <el-text class="mx-1" type="warning">分析目标：{{row.goal}}</el-text><br/>
        <el-text class="mx-1" type="warning">用户：{{row.user.userName}}</el-text>
      </div>
      <v-chart class="v-chart-container" id="displayChart" :option="parseGenChart(row.genOptions)"></v-chart>
      <div class="chartResult">
        <el-text class="mx-1" type="danger">{{row.genChartResponse}}</el-text>
      </div>
    </div>
  </el-dialog>

</template>

<script setup>

import {onMounted, reactive, ref} from "vue";
import {Back, StarFilled} from "@element-plus/icons-vue";
import myAxios from "../../../../plugins/myAxios.js";
import {ElMessage} from "element-plus";

const chartListData = ref([]) //图表数据
const allChartDataLength  =ref(0); //所有图表的数量
const isRunningChartLength = ref(0) //正在处理中的图表数量

const dialogTableVisible = ref(false)

const row = reactive({
  chartId:'', //图表id
  genChartResponse:'', //图表分析结果
  genOptions:'', //图表的echarts option参数
  name:'',
  goal:'',
  user:'',
  status:''
})


/**
 * 删除图表
 * @param chartId
 */
const deleteChart = async(chartId) => {
   console.log(chartId)
  const res = await myAxios.post('/chart/delete',{
     id:chartId
  });
  console.log(res)
  if (res.code === 0 && res.data) {
    new Promise(() => {
      ElMessage.success("删除成功");
      getChartStatus();
    })
  }else{
    ElMessage.error(res.message);
  }
}

/**
 * 处理eCharts option配置项
 * @param genChart
 * @returns {any}
 */
const parseGenChart = (genChart) => {
  console.log("json" )
  console.log(genChart)
  let json = JSON.parse(genChart)
  if(json.hasOwnProperty("title")){
    if(json.title.hasOwnProperty("text"))
      json.title.text = "";
  }
  if(Object.keys(json).includes('grid')){
    delete json.grid;
  }
  if(!Object.keys(json).includes('toolbox')){
    json.toolbox ={};
  }
  json.toolbox ={
    show:true,
    feature:{
      dataView:{
        readOnly:false
      },
      dataZoom:{},
      magicType:{
        type: ['line','bar']
      },
      restore:{},
      saveAsImage:{}
    }
  }
  return json;
}


//处理弹出框显示逻辑
const dialogTableVisibleFunc = (chart) => {
  let status = chart.status;
  if(status === 'wait'){
    return 2;
  }else if(status === 'running'){
    return 3;
  }else if(status === 'failed'){
    return 4;
  }else{
    row.chartId = chart.id;
    row.genChartResponse = chart.getResult;
    row.genOptions = chart.genchart;
    row.status = chart.status;
    row.name = chart.name;
    row.goal = chart.goal;
    row.user = chart.user;
  }
  console.log("row")
  dialogTableVisible.value = true
}

//获取正在处理中的图表数量
const handleChartData = ()=>{
    let num = 0;
    for (let i = 0; i < chartListData.value.length; i++) {
        if(chartListData.value[i].status === 'running'){
            num++;
        }
    }
    isRunningChartLength.value = num;
}

const stepsActiveFunc = (status) =>{
    if(status === 'wait'){
        return 2;
    }else if(status === 'running'){
        return 3;
    }else if(status === 'failed'){
        return 4;
    }else if(status === 'succeed'){
        return 5;
    }else{
        return 4;
    }
}
const setSucceedStep = (status) =>{
    if(stepsActiveFunc(status) === 4){
        return 'wait';
    }else{
        return 'success'
    }
}

onMounted(() =>{
    getChartStatus();
})

//获取当前用户的所有图表信息
const getChartStatus = async () =>{
    const res = await myAxios.post('/chart/my/list/chartStatus');
    if (res.code === 0 && res.data) {
        chartListData.value = res.data;
        allChartDataLength.value = res.data.length;
        handleChartData();
    }else if(res.code === 50000){
        ElMessage.error(res.message);
    } else {
        ElMessage.error("账号密码错误，请重新输入")
    }
}

</script>

<style scoped lang="less">
.chartInfo-container{
    margin-top: 30px;
    border: 1px solid var(--el-border-color);
    border-radius: 5px;
    margin-bottom: 20px;
    //background: #909399;
    .card-header{
        height: 20px;
        line-height: 20px;
        margin-left: 20px;
    }
}
.dialog_container{
  display: flex;
  flex-direction: column;
  //justify-content: center;
  align-items: center;
  .dialog_container-chartHead{
    margin-bottom: 20px;
    //background: red;
  }
  .v-chart-container{
    width: 400px;
    height: 400px;
    margin-left:  -60px;
  }
  .chartResult{
    padding: 0px 100px;
  }
}





</style>